<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>详细分析结果</title>
    <link rel="stylesheet" href="/static/css/layui.css?v={{ current_timestamp }}">
    <script src="/static/jquery-3.6.0.min.js?v={{ current_timestamp }}"></script>
    <script src="/static/layui.js?v={{ current_timestamp }}"></script>
    <style>
        /* 防止字体重叠的样式修复 */
        .layui-form-item {
            margin-bottom: 20px !important;
            clear: both;
        }

        .layui-form-item p {
            margin: 10px 0 !important;
            line-height: 1.8 !important;
            clear: both;
            overflow: hidden;
        }

        .layui-form-label {
            width: 90px !important;
            padding: 8px 12px !important;
            background-color: #f5f5f5 !important;
            font-weight: bold !important;
            float: left !important;
            margin-right: 10px !important;
        }

        .layui-input-block {
            margin-left: 0 !important;
            padding: 8px 12px !important;
            background-color: #fafafa !important;
            overflow: hidden !important;
        }

        .layui-card {
            margin-bottom: 25px !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        }

        .layui-card-header {
            padding: 15px 20px !important;
            background-color: #f8f8f8 !important;
            border-bottom: 1px solid #e6e6e6 !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
        }

        .student-title {
            margin: 0 !important;
            color: #333 !important;
            font-size: 18px !important;
            line-height: 1.4 !important;
            flex: 1 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .patriotic-badge {
            font-size: 12px !important;
            padding: 4px 8px !important;
            margin-left: 15px !important;
            flex-shrink: 0 !important;
        }

        .layui-card-body {
            padding: 25px !important;
            line-height: 1.6 !important;
        }

        .layui-col-md6 {
            padding: 0 10px !important;
            float: left !important;
            width: 50% !important;
        }

        .layui-row {
            display: block !important;
            margin-left: -10px !important;
            margin-right: -10px !important;
        }

        .layui-row:after {
            content: "" !important;
            display: table !important;
            clear: both !important;
        }

        textarea {
            margin-top: 10px !important;
            line-height: 1.6 !important;
        }


        /* 确保容器布局正确 */
        .layui-container {
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 20px !important;
        }

        /* 修复详细分析内容区域 */
        .layui-form-text {
            margin-top: 20px !important;
        }

        .layui-form-text textarea {
            width: 100% !important;
            box-sizing: border-box !important;
            min-height: 120px !important;
            resize: vertical !important;
            padding: 12px !important;
            border: 1px solid #e6e6e6 !important;
            border-radius: 4px !important;
            background-color: #f9f9f9 !important;
            font-family: inherit !important;
            font-size: 14px !important;
            line-height: 1.6 !important;
        }

        /* 修复操作按钮区域 */
        .operation-buttons {
            margin-bottom: 25px !important;
            padding: 15px 20px !important;
            background-color: #f9f9f9 !important;
            border-radius: 4px !important;
            border: 1px solid #e6e6e6 !important;
        }

        .operation-buttons .layui-btn {
            margin-right: 10px !important;
        }
    </style>
</head>

<body>

    <div class="layui-container" style="padding: 20px; max-width: 1200px; margin: 0 auto;">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header"
                        style="background-color: #f8f8f8; border-bottom: 1px solid #e6e6e6; padding: 15px 20px;">
                        <h2 style="margin: 0 0 10px 0; color: #333; font-size: 24px; line-height: 1.4;">爱国情感详细分析结果</h2>
                        <p style="margin: 0; color: #666; font-size: 14px; line-height: 1.4;">学生作业的详细情感分析内容</p>
                    </div>
                    <div class="layui-card-body">
                        {% if message %}
                        <div class="layui-row">
                            <div class="layui-col-md12">
                                <p style="text-align: center; color: #999; font-size: 16px;">{{ message }}</p>
                            </div>
                        </div>
                        {% else %}

                        <!-- 操作按钮 -->
                        <div class="operation-buttons">
                            <button class="layui-btn layui-btn-normal"
                                onclick="window.location.href='/patriotic_prompt/analysis_results/{{ homework_id }}'">
                                <i class="layui-icon layui-icon-chart"></i> 查看图表统计
                            </button>
                            <button class="layui-btn layui-btn-warm"
                                onclick="window.location.href='/patriotic_prompt/'">
                                <i class="layui-icon layui-icon-return"></i> 返回主页
                            </button>
                        </div>

                        <!-- 详细分析结果 -->
                        {% for analysis in analyses %}
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <h3 class="student-title">{{ analysis.upload_homework.student.name }} ({{
                                    analysis.upload_homework.student.student_id }})</h3>
                                <span class="layui-badge patriotic-badge
                                {% if analysis.patriotic_level == '强烈爱国' %}
                                    layui-bg-green
                                {% elif analysis.patriotic_level == '爱国' %}
                                    layui-bg-blue
                                {% elif analysis.patriotic_level == '中性' %}
                                    layui-bg-orange
                                {% elif analysis.patriotic_level == '不爱国' %}
                                    layui-bg-red
                                {% else %}
                                    layui-bg-gray
                                {% endif %}
                                ">{{ analysis.patriotic_level }}</span>
                            </div>
                            <div class="layui-card-body">
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">基本信息</label>
                                            <div class="layui-input-block">
                                                <p><strong>学号：</strong>{{ analysis.upload_homework.student.student_id }}
                                                </p>
                                                <p><strong>班级：</strong>{{ analysis.upload_homework.student.class_id1
                                                    }}-{{ analysis.upload_homework.student.class_id2 }}</p>
                                                <p><strong>分析时间：</strong>{{ analysis.analysis_time.strftime('%Y-%m-%d
                                                    %H:%M:%S') if analysis.analysis_time else '未知' }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">分析结果</label>
                                            <div class="layui-input-block">
                                                <p><strong>爱国情感得分：</strong>
                                                    <span style="color: 
                                                    {% if analysis.patriotic_score >= 0.8 %}#5FB878
                                                    {% elif analysis.patriotic_score >= 0.6 %}#FFB800
                                                    {% elif analysis.patriotic_score >= 0.4 %}#FF5722
                                                    {% else %}#999{% endif %}; font-weight: bold;">
                                                        {{ "%.1f"|format(analysis.patriotic_score * 100) }}%
                                                    </span>
                                                </p>
                                                <p><strong>是否具有爱国情感：</strong>
                                                    <span
                                                        style="color: {{ '#5FB878' if analysis.is_patriotic else '#FF5722' }}; font-weight: bold;">
                                                        {{ '是' if analysis.is_patriotic else '否' }}
                                                    </span>
                                                </p>
                                                <p><strong>置信度：</strong>{{ "%.1f"|format(analysis.confidence * 100) }}%
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">词汇统计</label>
                                            <div class="layui-input-block">
                                                <p><strong>爱国词汇数量：</strong>
                                                    <span style="color: #5FB878; font-weight: bold;">{{
                                                        analysis.patriotic_words_count }}</span>
                                                </p>
                                                <p><strong>反爱国词汇数量：</strong>
                                                    <span style="color: #FF5722; font-weight: bold;">{{
                                                        analysis.anti_patriotic_words_count }}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">技术信息</label>
                                            <div class="layui-input-block">
                                                <p><strong>分析模式：</strong>{{ analysis.prompt_type if analysis.prompt_type
                                                    else '标准分析' }}</p>
                                                <p><strong>模型类型：</strong>{{ analysis.model_type if analysis.model_type
                                                    else 'DeepSeek' }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 详细分析内容 -->
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">详细分析内容：</label>
                                    <div class="layui-input-block">
                                        <textarea readonly
                                            style="min-height: 150px; background-color: #f8f8f8; border: 1px solid #e6e6e6; padding: 10px; border-radius: 4px; resize: vertical;">{{ analysis.patriotic_breakdown if analysis.patriotic_breakdown else '暂无详细分析内容' }}</textarea>
                                    </div>
                                </div>

                                <!-- 作业内容预览 -->
                                {% if analysis.upload_homework.text_content %}
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">作业内容预览：</label>
                                    <div class="layui-input-block">
                                        <textarea readonly
                                            style="min-height: 100px; background-color: #f0f0f0; border: 1px solid #ddd; padding: 10px; border-radius: 4px; resize: vertical;">{{ analysis.upload_homework.text_content[:500] }}{% if analysis.upload_homework.text_content|length > 500 %}...{% endif %}</textarea>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['layer'], function () {
            var layer = layui.layer;

        });
    </script>

</body>

</html>